<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <a href="javascript:void(0);" onclick="window.close()"
           class="btn btn-default pull-right" style="margin-right: 10px">
            <span class="Bold">取消</span>
        </a>
        <a id="btn-save" shiro:hasPermission="est:cha:edit" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px">
            <span class="Bold">确定</span>
        </a>
        <a id="btn-refresh" href="javascript:void(0)" onclick="refreshDrawNo()"
           class="btn btn-info pull-right" style="margin-right: 10px">
            <span class="Bold">刷新图号信息</span>
        </a>
    </div>
    <div class="row">
        <form id="cardForm" class="form-horizontal">
            <div class="col-xs-11 col-xs-offset-1">
                <input type="hidden" name="id" th:value="${card.id}">
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td colspan="10">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -20px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="2">工艺过程卡</td>
                        <td style="width: 9%"></td>
                    </tr>
                    <tr>
                        <td style="width: 8%">项目编号</td>
                        <td colspan="2" style="width: 11%;font-size: 14px;">
                            <input id="proCode" type="text" class="form-control" name="proCode"
                                   th:value="${card.proCode}" readonly>
                        </td>
                        <td style="width: 8%">项目名称</td>
                        <td colspan="2" style="width: 16%">
                            <input id="proName" type="text" class="form-control" name="proName"
                                   th:value="${card.proName}" readonly>
                        </td>
                        <td style="width: 8%">项目数量</td>
                        <td style="width: 8%">
                            <input id="proNum" type="number" class="form-control" name="proNum"
                                   th:value="${card.proNum}" readonly>
                        </td>
                        <td style="width: 8%">类型</td>
                        <td style="width: 8%">
                            <select id="special" class="form-control" name="special">
                                <option value="">请选择</option>
                                <option th:each="s : ${specials}" th:value="${s.name}"
                                        th:text="${s.name}" th:selected="${s.name == card.special}"></option>
                            </select>
                        </td>
                        <td style="width: 8%">部分</td>
                        <td style="width: 8%">
                            <select id="part" class="form-control" name="partId">
                                <option th:each="p : ${parts}" th:value="${p.id}"
                                        th:text="|${p.special}-${p.proPart}|"
                                        th:selected="${p.id == card.partId}"></option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td rowspan="2">零件图号</td>
                        <td rowspan="2" colspan="3">
                            <select id="craMakeDetailId" class="form-control select2" name="craMakeDetailId">
                                <option th:each="d : ${drawNos}" th:value="${d.id}"
                                        th:text="${d.drawNo}" th:selected="${d.id == card.craMakeDetailId}"></option>
                            </select>
                            <input id="drawNo" type="hidden" name="drawNo" th:value="${card.drawNo}">
                        </td>
                        <td rowspan="2" style="width: 8%">零件名称</td>
                        <td rowspan="2"><input id="drawName" type="text" class="form-control" name="drawName"
                                               th:value="${card.drawName}" readonly></td>
                        <td>零件数量</td>
                        <td><input id="drawNum" type="number" step="0.1" class="form-control" name="drawNum"
                                   th:value="${card.drawNum}" readonly></td>
                        <td>材质</td>
                        <td><input id="quality" type="text" class="form-control" name="quality"
                                   th:value="${card.quality}" autocomplete="off"></td>
                        <td>重量(kg)</td>
                        <td><input id="weight" type="number" step="0.1" class="form-control" name="weight"
                                   th:value="${card.weight}"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>规格</td>
                        <td colspan="5"><input id="spec" type="text" class="form-control" name="spec"
                                               th:value="${card.spec}" autocomplete="off"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>路线</td>
                        <td style="width: 5%">序号</td>
                        <td style="width: 6%">工序</td>
                        <td>设备名称</td>
                        <td colspan="8">工艺内容</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="card">
                    <tr th:each="d : ${details}">
                        <td>
                            <select th:if="${d.tranStatus == 1 or d.tranStatus == 0}" class="form-control" name="route" title="">
                                <option th:each="r : ${routes}" th:value="${r.name}"
                                        th:text="${r.name}" th:selected="${d.route == r.name}"></option>
                            </select>
                            <!--<select th:if="${d.tranStatus != 1 and d.tranStatus != 0}" readonly="readonly" class="form-control" name="route"-->
                                    <!--title="">-->
                                <!--<option th:each="r : ${routes}" th:value="${r.name}"-->
                                        <!--th:text="${r.name}" th:selected="${d.route == r.name}"></option>-->
                            <!--</select>-->
                            <input th:if="${d.tranStatus != 1 and d.tranStatus != 0}"
                                   readonly="readonly"
                                   class="form-control"
                                   name="route"
                                   style="text-align: left;padding: 6px,12px;font-size: 14px"
                                   th:value="${d.route}">
                        </td>
                        <td>
                            <input th:if="${d.tranStatus == 1 or d.tranStatus == 0}" type="text" class="form-control" name="orderNo"
                                   th:value="${d.orderNo}" autocomplete="off">
                            <input th:if="${d.tranStatus != 1 and d.tranStatus != 0}" readonly="readonly" type="text" class="form-control"
                                   name="orderNo" th:value="${d.orderNo}" autocomplete="off">
                        </td>
                        <td>
                            <select th:if="${d.tranStatus == 1 or d.tranStatus == 0}" class="form-control" name="process" title="">
                                <option th:each="p : ${processes}" th:value="${p.name}"
                                        th:text="${p.name}" th:selected="${d.process == p.name}"></option>
                            </select>
                            <!--<select th:if="${d.tranStatus != 1 and d.tranStatus != 0}" readonly="readonly" class="form-control" name="process"-->
                                    <!--title="">-->
                                <!--<option th:each="p : ${processes}" th:value="${p.name}"-->
                                        <!--th:text="${p.name}" th:selected="${d.process == p.name}"></option>-->
                            <!--</select>-->
                            <input th:if="${d.tranStatus != 1 and d.tranStatus != 0 and d.process != null}"
                                   readonly="readonly"
                                   class="form-control"
                                   name="process"
                                   style="text-align: left;padding: 6px,12px;font-size: 14px"
                                   th:value="${d.process}">
                            <!--<input th:if="${d.tranStatus != 1 and d.tranStatus != 0 and d.process == null}"-->
                                   <!--readonly="readonly"-->
                                   <!--class="form-control"-->
                                   <!--name="process"-->
                                   <!--style="text-align: left"-->
                                   <!--value="">-->
                        </td>
                        <td>
                            <select th:if="${d.tranStatus == 1 or d.tranStatus == 0}" class="form-control" name="equName" title="">
                                <option value=""></option>
                                <option th:each="e : ${equNames}" th:value="${e.name}"
                                        th:text="${e.name}" th:selected="${d.equName == e.name}"></option>
                            </select>
                            <!--<select th:if="${d.tranStatus != 1 and d.tranStatus != 0}" readonly="readonly" class="form-control" name="equName"-->
                                    <!--title="">-->
                                <!--<option value=""></option>-->
                                <!--<option th:each="e : ${equNames}" th:value="${e.name}"-->
                                        <!--th:text="${e.name}" th:selected="${d.equName == e.name}"></option>-->
                            <!--</select>-->
                            <input th:if="${d.tranStatus != 1 and d.tranStatus != 0 and d.equName != null}"
                                   readonly="readonly"
                                   class="form-control"
                                   name="equName"
                                   style="text-align: left"
                                   th:value="${d.equName}"/>
                            <input th:if="${d.tranStatus != 1 and d.tranStatus != 0 and d.equName == null}"
                                   readonly="readonly"
                                   class="form-control"
                                   name="equName"
                                   style="text-align: left"
                                   value="" />
                        </td>
                        <td colspan="8">
                            <textarea th:if="${d.tranStatus == 1 or d.tranStatus == 0}" class="form-control" name="craftContent" rows="1"
                                      th:utext="${d.craftContent}"></textarea>
                            <textarea th:if="${d.tranStatus != 1 and d.tranStatus != 0}" readonly="readonly" class="form-control"
                                      name="craftContent" rows="1" th:utext="${d.craftContent}"></textarea>
                        </td>
                        <td style="font-size: 16px" th:if="${d.tranStatus == 1 or d.tranStatus == 0}">
                            <span class="card-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="card-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                            <input type="hidden" name="detailId" th:value="${d.id}">
                        </td>
                        <td th:if="${d.tranStatus != 1 and d.tranStatus != 0}">
                            <span class="card-add-disabled" title="已转序无法变更"><i class="fa fa-plus text-gray"></i> </span>
                            <span class="card-del-disabled" title="已转序无法变更"><i class="fa fa-remove text-gray"></i> </span>
                            <span class="text-red" title="已转序无法变更">已转序无法变更</span>
                            <input type="hidden" name="detailId" th:value="${d.id}">
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>编制人员</td>
                        <td colspan="2">
                            <input type="text" class="form-control" name="createName" th:value="${card.createNameOne}"
                                   autocomplete="off">
                        </td>
                        <td>联系电话</td>
                        <td colspan="2">
                            <input type="text" class="form-control" name="createTel" th:value="${card.createTel}"
                                   autocomplete="off">
                        </td>
                        <td>审核人员</td>
                        <td colspan="2">
                            <select id="verifyCode" class="form-control" name="verifyCode" title="">
                                <option value="">请选择</option>
                                <option th:each="v : ${verifys}" th:value="${v.code}"
                                        th:text="${v.name}" th:selected="${v.name == card.verifyName}"></option>
                            </select>
                            <input id="verifyName" type="hidden" name="verifyName" th:value="${card.verifyName}">
                        </td>
                        <td>审核时间</td>
                        <td colspan="2">
                            <!--<input type="text" class="form-control" name="verifyTime" autocomplete="off">-->
                        </td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </form>
    </div>
</section>
<div id="div-route" style="display: none">
    <select class="form-control" name="route" title="">
        <option th:each="r : ${routes}" th:value="${r.name}"
                th:text="${r.name}"></option>
    </select>
</div>
<div id="div-process" style="display: none">
    <select class="form-control" name="process" title="">
        <option th:each="p : ${processes}" th:value="${p.name}"
                th:text="${p.name}"></option>
    </select>
</div>
<div id="div-equName" style="display: none">
    <select class="form-control" name="equName" title="">
        <option value=""></option>
        <option th:each="e : ${equNames}" th:value="${e.name}"
                th:text="${e.name}"></option>
    </select>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/plugin/SheetJs/xlsx.core.min.js}"></script>
<script th:inline="javascript">

    /** 清空零件信息 */
    function emptyComp() {
        $("#DrawNo").val('');
        $("#drawName").val('');
        $("#drawNum").val('');
        $("#quality").val('');
        $("#spec").val('');
        $("#weight").val('');
    }

    /** 获取部分 */
    function getPart() {
        let code = $("#proCode").val();
        let type = $("#special").val();
        switch (type) {
            case '机械' :
            case '流体' :
            case '自动化' :
                fetchPart(code, type);
                break;
            case '外观' :
                fetchPart(code, null);
                break;
            case '维修备件' :
            case '设备工具' :
            case '消耗品' :
                $("#part").empty().append(`<option value="整体">整体</option>`);
                break;
            case '':
                $("#part").empty().append(`<option value="">请选择</option>`);
                break;
        }
    }
    function fetchPart(code, type) {
        js.get({
            url: ctx + 'est/add/part/list',
            data: {
                code : code,
                type : type
            },
            success: function (result) {
                $("#part").empty().append(`<option value="">请选择</option>`);
                result.forEach(value => {
                    if (value) {
                        $("#part").append(`<option value="${value.id}">${value.special}-${value.proPart}</option>`);
                    }
                })
            }
        })
    }

    function extracted(routeHtml, processHtml, equNameHtml) {
        if ($("table tbody tr").length === 0) {
            $("#card").append(`
                               <tr>
                                    <td>
                                        ${routeHtml}
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" name="orderNo" autocomplete="off">
                                    </td>
                                    <td>
                                        ${processHtml}
                                    </td>
                                    <td>
                                        ${equNameHtml}
                                    </td>
                                    <td colspan="8">
                                        <textarea class="form-control" name="craftContent" rows="1"></textarea>
                                    </td>
                                    <td>
                                        <span class="card-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                                        <span class="card-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                                        <input type="hidden" name="detailId">
                                    </td>
                                </tr>
                            `)
        }
    }

    function refreshDrawNo() {
        js.get({
            url: ctx + 'est/add/drawNo',
            data: {
                id: $("#craMakeDetailId").val()
            },
            success: function (result) {
                $("#drawNo").val(result.drawNo);
                $("#drawName").val(result.drawName);
                $("#drawNum").val(result.drawNum);
            }
        });
    }

    $(function () {

        let routeHtml = $("#div-route").html();
        let processHtml = $("#div-process").html();
        let equNameHtml = $("#div-equName").html();

        extracted(routeHtml, processHtml, equNameHtml);

        /** 工艺内容换行处理 */
        $("[name=craftContent]").each(function () {
            $(this).val(js.textToValue($(this).val()));
        })
        /** 选择审核人 */
        $("#verifyCode").change(function () {
            $("#verifyName").val($(this).find('option:selected').text())
        });

        $("#special").change(function () {
            getPart();
        })

        /** 部分下拉框选中 */
        $("#part").change(function () {
            emptyComp();
            let $this = $(this);
            js.get({
                url: ctx + 'est/add/drawNo/list',
                data: {
                    code : $("#proCode").val(),
                    partId : $this.val()
                },
                success: function (result) {
                    $("#craMakeDetailId").empty().append(`<option value="">请选择</option>`);
                    result.forEach(value => {
                        if (value) {
                            $("#craMakeDetailId").append(`<option value="${value.id}">${value.drawNo}</option>`);
                        }
                    });
                }
            })
        })
        /** 图号下拉框选中 */
        $("#craMakeDetailId").on("select2:select",function(){
            let $this = $(this);
            if ($this.val()) {
                js.get({
                    url: ctx + 'est/add/drawNo',
                    data: {
                        id: $this.val()
                    },
                    success: function (result) {
                        $("#drawNo").val(result.drawNo);
                        $("#drawName").val(result.drawName);
                        $("#drawNum").val(result.drawNum);
                        $("#quality").val(result.quality);
                        $("#spec").val(result.specification);
                        $("#weight").val(result.weight);
                    }
                });
            } else {
                emptyComp();
            }
        });
        /** 添加一行无法变更 */
        $("#cardForm").on('click','.card-add-disabled',function (){
            js.modal.warning("已转序无法变更");
        })
        /** 删除一行无法变更 */
        $("#cardForm").on('click','.card-del-disabled',function (){
            js.modal.warning("已转序无法变更");
        })

        /** 添加一行 */
        $("#cardForm").on('click', '.card-add', function () {
            $(this).parents("tr").after(`
                    <tr>
                        <td>
                            ${routeHtml}
                        </td>
                        <td>
                            <input type="text" class="form-control" name="orderNo" autocomplete="off">
                        </td>
                        <td>
                            ${processHtml}
                        </td>
                        <td>
                            ${equNameHtml}
                        </td>
                        <td colspan="8">
                            <textarea class="form-control" name="craftContent" rows="1"></textarea>
                        </td>
                        <td>
                            <span class="card-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="card-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                            <input type="hidden" name="detailId">
                        </td>
                    </tr>
            `);
            $(this).parents("tr").next().find("select[name=route]").val($(this).parents("tr").find("select[name=route]").val());
            $(this).parents("tr").next().find("input[name=orderNo]").val($(this).parents("tr").find("input[name=orderNo]").val());

        });
        /** 删除行 */
        $('#cardForm').on('click', '.card-del', function () {
            let $this = $(this);
            let id = $(this).next().val();
            if (id) {
                js.modal.confirm("确定删除吗？", function () {
                    js.post({
                        url: ctx + "est/cardList/detail/del",
                        data: {id: id},
                        success: function (result) {
                            if (result.type === web_status.SUCCESS) {
                                js.modal.success(result.msg);
                                $this.parents("tr").remove();
                                extracted(routeHtml, processHtml, equNameHtml);
                            } else {
                                js.modal.warning(result.msg);
                            }
                        }
                    });
                });
            } else {
                $this.parents("tr").remove();
                extracted(routeHtml, processHtml, equNameHtml);
            }

        });

        /** 修改工艺卡 */
        $("#btn-save").click(function () {
            let $this = $(this);
            let res = js.vd({
                id: 'cardForm',
                notEmpty: ['proCode', 'proName', 'proNum', 'malType', 'partId', 'special',
                    'craMakeDetailId', 'drawName', 'drawNum', 'quality', 'weight', 'route',
                    'orderNo', 'process', 'craftContent', 'createTel', 'verifyCode']
            })
            if (!res) {
                return;
            }
            $this.attr('disabled', true);
            js.submit({
                formId: "cardForm",
                url: ctx + 'est/cha/update',
                data: new FormData($("#cardForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        // location.href = ctx + "est/cha";
                        window.close();
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.removeAttr('disabled');
        });

    });
</script>
</body>
</html>
